<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/password.css" />
    <link href="css/css/lyz.calendar.css" rel="stylesheet" type="text/css" />
    <!-- <link href="laydate/theme/default/laydate.css" rel="stylesheet" type="text/css" /> -->
  
    <style>
       input {
            border: 1px solid #000;
        }
        th {
            text-align: center;
        }
        .usermes {
            background-color: #fff;
            padding: 10px 20px;
        }
        .password .usermes {
            padding-top: 10px;
        }
        .mestop {
            color: #fff;
            width: 100%;
            height: 34px;
            background: #3498db;
            border-radius: 3px;
        }
        .usermes .table1 tr {
            border:1px solid rgba(153,153,153,0.5);
        }
        .cashscoreDetail .goodmes {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cashscoreDetail .goodmes .img {
            width: 60px;
            height: 60px;
            background: #d8d8d8;
            border-radius: 2px;
            overflow: hidden;
        }
        .cashscoreDetail .goodmes .img img {
            width: 100%;
        }
        .cashscoreDetail .goodmes .rightname {
            margin-left: 10px;
        }
        table button{
            width:100px;
            height:34px;
            background:rgba(52,152,219,1);
            border-radius:3px;
            color: #fff;
        }
        .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
            background-color: rgba(52,152,219,1);
            border-color: rgba(52,152,219,1);
        }
        .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            color: #fff;
            background-color: rgba(52,152,219,1);
        }
        .dataTwo .row {
            padding: 0 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .dataTwo .row .box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .dataTwo .row .left {
           width: 400px;
           margin-bottom: 20px;
        }
        .dataTwo .row .right {
           width: 600px;
           margin-left: 20px;
           line-height: 34px;
           margin-bottom: 20px;
        }
        .dataTwo .row .box span {
           width: 70px;
        }
        .dataTwo .row .right span {
           width: 40px;
        }
        .dataTwo .row .box .inp {
            width: 180px;
            height: 34px;
            border:1px solid rgba(153,153,153,1);
        }
        .dataTwo .row .box button {
            color: #fff;
            width:60px;
            height:34px;
            margin-left: 20px;
            background:rgba(52,152,219,1);
            border-radius:3px;
        }
        .dataTwo .left select {
            width: 300px;
            height: 34px;
            border:1px solid rgba(153,153,153,1);
        }
        .dataTwo .layui-laydate .layui-this {
            background-color: rgba(52,152,219,1)!important;
        }
        /* @media screen and (max-width: 768px) {
            .dataTwo .row .left {
                width: 300px;
                margin-bottom: 20px;
            }
            .dataTwo .row .right {
                width: 300px;
                margin-left: 20px;
                line-height: 34px;
                margin-bottom: 20px;
            }
            .dataTwo .row .box .inp {
                width: 90px;
                height: 34px;
                border:1px solid rgba(153,153,153,1);
            }
            .dataTwo .row .left {
                width: 250px;
                margin-bottom: 20px;
            }
        } */
    </style>
</head>

<body>
    <div class="cashscoreDetail">
        <div class="password">
            <div class="row" style="margin:10px -20px;">
                <div class="col-xs-6 col-sm-4 shoko"><a class="message active">奖励明细</a></div>
                <div class="col-xs-6 col-sm-4 shoko"><a class="message">交易明细</a></div>
                <div class="col-xs-6 col-sm-4 shoko"><a class="message">消费明细</a></div>
            </div>
            <div class="mesinp1">
                <div class="usermes">
                    <div class="cashmes" style="color:#000;line-height:50px;font-weight: 600;">自 <span>2018-12-28</span> 至 <span>2019-01-03</span>
                        累计所获： </div>
                    <div class="table-responsive">
                        <table class="table table-hover table1" style="text-align:center;color:#000">
                            <tr style="background:#E31C1C;color: #fff;">
                                <td>直推奖($)</td>
                                <td>点位奖($)</td>
                                <td>付出奖($)</td>
                                <td>消费奖($)</td>
                                <td>商务奖($)</td>
                            </tr>
                            <tr style="height: 50px;">
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                            </tr>
                        </table>
                    </div>
                    <div class="dataTwo  hidden-sm hidden-xs">
                        <div class="row" style="margin:10px -20px;">
                            <div class="box left">
                                <span>奖金类型</span>
                                <select>
                                    <option>请选择</option>
                                </select>
                            </div>
                            <div class="box right">
                                <span>时间</span><input type="text" class="inp" id="test1" placeholder="请选择时间">&nbsp;至&nbsp;<input
                                    type="text" class="inp" id="test2" placeholder="请选择时间"><button>查询</button>
                            </div>
                        </div>
                    </div>

                    <div class="tablemes">
                        <div class="table-responsive">
                            <table class="table table-hover" style="text-align:center;color:#000">
                                <tr class="active" style="background:#bbb;">
                                    <th>奖金类型</th>
                                    <th>详细说明</th>
                                    <th>金额$</th>
                                    <th>时间</th>
                                </tr>
                                <tr>
                                    <td>商务奖</td>
                                    <td>商务奖</td>
                                    <td style="color:#E31C1C;">￥600</td>
                                    <td>2018-12-28 22:55:27</td>
                                </tr>
                                <tr>
                                    <td colspan="4">暂无更多数据</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mesinp2 hidden">
            <div class="usermes">
                <div class="cashmes" style="color:#000;line-height:50px;font-weight: 600;">当前现金积分余额：<span style="color:#E31C1C;">$500</span>
                </div>
                <div class="dataTwo  hidden-sm hidden-xs">
                    <div class="row" style="margin:10px -20px;">
                        <div class="box left">
                            <span>交易类型</span>
                            <select>
                                <option>请选择</option>
                            </select>
                        </div>
                        <div class="box right">
                            <span>时间</span><input type="text" class="inp" id="test1" placeholder="请选择时间">&nbsp;至&nbsp;<input
                                type="text" class="inp" id="test2" placeholder="请选择时间"><button>查询</button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover" style="text-align:center;color:#000">
                        <tr class="active" style="background:#bbb;">
                            <th>奖金类型</th>
                            <th>详细说明</th>
                            <th>金额($)/手续费($)</th>
                            <th>时间</th>
                        </tr>
                        <tr>
                            <td>商务奖</td>
                            <td>您将$500的现金积分卖出，平台收取10%的手续费</td>
                            <td style="color:#E31C1C;">500/50</td>
                            <td>2018-12-28 22:55:27</td>
                        </tr>
                        <tr>
                            <td colspan="4">暂无更多数据</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="mesinp3 hidden">
            <div class="usermes">
                <div class="cashmes" style="color:#000;line-height:50px;font-weight: 600;">当前现金积分余额：<span style="color:#E31C1C;">$500</span>
                </div>
                <div class="dataTwo  hidden-sm hidden-xs">
                    <div class="row" style="margin:10px -20px;">
                        <div class="box right">
                            <span>时间</span><input type="text" class="inp" id="test1" placeholder="请选择时间">&nbsp;至&nbsp;<input
                                type="text" class="inp" id="test2" placeholder="请选择时间"><button>查询</button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover" style="text-align:center;color:#000">
                        <tr class="active" style="background:#bbb;">
                            <th>订单号</th>
                            <th>商品信息</th>
                            <th>商品单价</th>
                            <th>商数量</th>
                            <th>小计</th>
                            <th>交易时间</th>
                        </tr>
                        <tr>
                            <td>312564888945612365</td>
                            <td>
                                <div class="goodmes">
                                    <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                    <div class="rightname">我是商品名称</div>
                                </div>
                            </td>
                            <td style="color:#E31C1C;">￥300</td>
                            <td> 2</td>
                            <td style="color:#E31C1C;">￥600</td>
                            <td>2018-12-28 22:55:27</td>
                        </tr>
                        <tr>
                            <td colspan="6">暂无更多数据</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- <script src="js/plugins/layer/layer.min.js"></script> -->
    <script src="js/lyz.calendar.min.js" type="text/javascript"></script>



    <script>


    </script>
    <script>
        $(".message").each(function (index) {
            $(".message").eq(index).click(function () {
                $(".message").removeClass("active");
                $(this).addClass("active");
                if (index == 0) {
                    $('.mesinp1').removeClass("hidden");
                    $(".mesinp2").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 1) {
                    $('.mesinp2').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp3").addClass("hidden");
                }
                if (index == 2) {
                    $('.mesinp3').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                    $(".mesinp2").addClass("hidden");
                }
            });
        })
        $("#sureTo").click(function () {
            layer.open({
                title: '温馨提示',
                content: '请收到货后，再确认收货！否则您可能钱货两空！',
                area: ['300px']
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    //确定的回调
                }
            });
        });
        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        //常规用法
        laydate.render({
            elem: '#test1' //指定元素
        });
        laydate.render({
            elem: '#test2' //指定元素
        });
    </script>
</body>

</html>